<template>
	<view class="page">
		<view class="top-bg">
			<view class="top-box-img" :style="{backgroundImage:'url('+appConfig.loginBg+')'}"></view>
		</view>
		<view class="container">
			<!-- 流星-->
			<view class="tn-satr">
				<view class="sky"></view>
				<view class="stars">
					<view class="falling-stars">
						<view class="star-fall"></view>
						<view class="star-fall"></view>
						<view class="star-fall"></view>
						<view class="star-fall"></view>
					</view>
					<view class="small-stars">
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
					</view>
					<view class="medium-stars">
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
						<view class="star"></view>
					</view>
				</view>
			</view>

			<view class="login-container">

				<view class="login-box">
					<image class="login-box--image" mode="aspectFit" :src="appConfig.companyRespVO.logoText"></image>

					<view class="login-box--title">
						<view>{{ appConfig.appTitle }}</view>
						<!-- <view class="login-box--desc">
							{{ appConfig.companyRespVO.slogan }}
						</view> -->
					</view>

					<view class="login-box--check">
						<view class="list__left">
							<tn-checkbox v-model="isCheck" :size="size" :iconSize="iconSize" activeColor="#43c93e"
								borderColor="#43c93e"></tn-checkbox>
							<view class="list__left__text">
								<text class="tn-color-black">已阅读并同意</text>
								<text class="dawn-color" @click="showAgree = true">
									《平台协议》
								</text>
							</view>
						</view>
					</view>

					<view class="login-box--btn">
						<!-- #ifdef H5 -->
						<tn-button @click="wechatLogin()" class="dawn-btn-lg dawn-btn-lg__main">
							<text class="tn-icon-wechat-fill tn-padding-right-xs"></text>
							<text>一键授权登录</text>
						</tn-button>
						<!-- #endif -->

						<!-- #ifdef MP -->
						<button class="btn-wx" open-type="getUserProfile" @click="getUserProfile">微信登陆21</button>
						<!-- #endif -->

					</view>
				</view>
			</view>
		</view>

		<tn-popup v-model="showAgree" mode="center" width="90%" :borderRadius="borderRadius">
			<view class="content">
				<tn-list-cell>
					<view class="tn-text-center">
						<text class="dawn-text-lg dawn-color">用户平台协议</text>
					</view>
				</tn-list-cell>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<view class='conters'>
						<parser :html="content" ref="article"></parser>
					</view>
				</scroll-view>
				<view
					class="tn-flex tn-flex-row-center tn-flex-col-center tn-width-full tn-padding-top tn-padding-bottom">
					<tn-button @click="onAgree" class="dawn-btn-lg dawn-btn-lg__info">
						<text class="tn-icon-check tn-padding-right-xs"></text>
						<text>我已阅读并同意</text>
					</tn-button>
				</view>
			</view>
		</tn-popup>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>
		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>

</template>

<script>
	const app = getApp();
	import page_mixin from '@/mixins/page_mixin.js'
	import routinePhone from '@/hosp/components/routine_phone.vue'
	import * as api from '@/api/api.js';
	import * as config from '@/api/config.js';
	import * as UserApi from "@/api/member/user";
	import * as ArticleApi from '@/api/cms/article.js';
	import * as AuthApi from "@/api/member/auth";
	import * as UserPatient from '@/libs/userPatient.js';
	import Routine from '@/libs/routine';
	import wechat from "@/libs/wechat";
	import {
		BACK_URL
	} from '@/config/cache';
	import {
		mapGetters
	} from "vuex";
	export default {
		mixins: [page_mixin],
		computed: mapGetters(['isLogin', 'appConfig']),
		data() {
			return {
				loading: false,
				isUp: false,
				phone: '',
				isHome: false,
				isPhoneBox: false,
				showAgree: false,
				borderRadius: 40,
				agree: {},
				content: '',
				isCheck: true,
				iconSize: 38,
				size: 40,
				code: '',
				authKey: app.globalData.reg,
				options: '',
				codeNum: 0,
				socialCode: '',
				socialState: '',
			}
		},
		components: {
			routinePhone
		},
		async onLoad(options) {
			await this.$onLaunched;
			console.info("wechat_login options")
			console.table(options)
			this.authKey = app.globalData.reg;
			// #ifdef H5
			document.body.addEventListener("focusout", () => {
				setTimeout(() => {
					const scrollHeight = document.documentElement.scrollTop || document.body
						.scrollTop ||
						0;
					window.scrollTo(0, Math.max(scrollHeight - 1, 0));
				}, 100);
			});
			// #endif

			if (!this.isLogin) {
				// #ifdef H5
				const {
					code,
					state
				} = options;
				this.options = options
				// 获取确认授权code
				this.code = code || ''
				let self = this;
				console.info("this.options.scope:" + this.options.scope)
				if (code && this.options.scope !== 'snsapi_base') {
					this.loading = true;
					let spread = app.globalData.spid ? app.globalData.spid : 0;
					// 公众号授权登录回调
					wechat.auth(code, state, spread).then(res => {
						// self.loading = false;
						self.$store.commit("LOGIN", {
							'token': res.data.accessToken
						});
						// 设置刷新令牌
						self.$store.commit('REFRESH_LOGIN', {
							refreshToken: res.data.refreshToken
						});
						self.$store.commit("SETUID", res.data.userId);
						self.$store.commit("OPENID", res.data.openid);

						self.getUserInfo(res.data, decodeURIComponent(decodeURIComponent(this.options
							.back_url)));
					}).catch(error => {
						console.table(error);
						self.loading = false;
						// 异常的情况，说明可能是账号没登录，所以发起手机绑定
						self.socialCode = code;
						self.socialState = state;
					});
				}
				// #endif
			} else {
				this.$util.Tips({
					title: '登录成功',
					icon: 'success'
				}, {
					tab: 1,
					url: '/main/index/index?init=no'
				})
			}

			this.getData();
		},
		methods: {
			// 弹窗关闭
			maskClose() {
				this.isUp = false
			},
			onAgree() {
				this.showAgree = false;
				this.isCheck = true;
			},
			getData() {
				let that = this;

				ArticleApi.getArticlePage({
					categoryKey: config.CMS_TYPE.AGREE_USER
				}).then(res => {
					console.table(res)
					if (res.code === 0) {
						const l = res.data.list || [];
						if (l.length > 0) {
							that.$set(this, 'agree', l[0]);
							that.content = l[0].content;
						}
					}
				});
			},
			// #ifdef H5
			// 公众号登录
			wechatLogin() {
				if (!this.isCheck) {
					uni.showToast({
						title: '请阅读并同意相关协议',
						icon: 'none'
					})
					return false;
				}
				this.loading = true;
				let urlData = location.pathname;
				// this.$wechat.oAuth('snsapi_userinfo', urlData);
				this.$wechat.toAuth('snsapi_userinfo', urlData);

				// if (!this.code && this.options.scope !== 'snsapi_base') {
				// 	let urlData = location.pathname;
				// 	this.$wechat.oAuth('snsapi_userinfo', urlData);
				// } else {
				// 	this.isUp = true;
				// }
			},

			// 输入手机号后的回调
			wechatPhone() {
				this.$Cache.clear('snsapiKey');
				if (this.options.back_url) {
					let url = uni.getStorageSync('snRouter');
					url = url.indexOf('/main/index/index') != -1 ? '/' : url;
					if (url.indexOf('/hosp/login/wechat_login') !== -1) {
						url = '/';
					}
					if (!url) {
						url = '/main/index/index';
					}
					this.isUp = false
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					setTimeout(res => {
						location.href = url
					}, 800)
				} else {
					uni.navigateBack()
				}
			},
			// #endif
			getUserInfo(data, back_url) {
				let that = this;
				this.loading = true;
				console.info("getUserInfogetUserInfogetUserInfogetUserInfo")
				UserApi.getUserInfo().then(res => {
					console.table(res)
					that.loading = false;
					that.$store.commit("UPDATE_USERINFO", res.data);

					UserPatient.getUserPatient(that.$store.getters.openid);

					let snRouter = uni.getStorageSync('snRouter');
					if (snRouter) {
						uni.removeStorage({
							key: 'snRouter'
						})
						location.replace(snRouter);
					} else {
						// 调回登录前页面
						let backUrl = back_url;
						// let backUrl = "/main/index/index";
						console.info("backUrlbackUrlbackUrlbackUrl:" + backUrl);

						if (backUrl.indexOf('/') !== 0) {
							backUrl = '/' + backUrl;
						}

						if (backUrl.indexOf('/hosp/login/wechat_login') !== -1) {
							backUrl = '/main/index/index?init=no';
							this.$util.Tips({
								title: '登录成功',
								icon: 'success'
							}, {
								tab: 1,
								url: backUrl
							})
						} else {
							location.replace(decodeURIComponent(decodeURIComponent(backUrl)));
						}
					}


				}).catch(e => {
					that.loading = false;
					that.$util.Tips({
						title: e.msg
					});
				});
			},
			bindPhoneClose(data) {
				if (data.isStatus) {
					this.isPhoneBox = false
					this.$util.Tips({
						title: '登录成功',
						icon: 'success'
					}, {
						tab: 3
					})
				} else {
					this.isPhoneBox = false
				}
			},
			// #ifdef MP
			getUserProfile() {
				console.info("getUserProfile")
				let self = this;
				uni.showLoading({
					title: '正在登录中'
				});
				Routine.getUserProfile()
					.then(res => {
						console.info("vue getUserProfile res");
						console.table(res);
						Routine.getCode()
							.then(code => {
								console.info("vue getUserProfile code");
								console.table(code);
								self.getWxUser(code, res);
							})
							.catch(res => {
								uni.hideLoading();
							});
					})
					.catch(res => {
						uni.hideLoading();
					});
			},
			getWxUser(code, res) {
				let self = this
				let userInfo = res.userInfo;
				userInfo.code = code;
				userInfo.spread_spid = app.globalData.spid; //获取推广人ID
				userInfo.spread_code = app.globalData.code; //获取推广人分享二维码ID
				userInfo.avatar = userInfo.userInfo.avatarUrl;
				userInfo.city = userInfo.userInfo.city;
				userInfo.country = userInfo.userInfo.country;
				userInfo.nickName = userInfo.userInfo.nickName;
				userInfo.province = userInfo.userInfo.province;
				userInfo.sex = userInfo.userInfo.gender;
				userInfo.type = 'routine'
				Routine.authUserInfo(userInfo.code, app.globalData.reg, userInfo.spread_spid)
					.then(res => {
						console.log("authUserInfo");
						console.table(res);
						if (res.data && res.data.phone && res.data.phone !== null) {
							uni.hideLoading();
							self.$store.commit('LOGIN', {
								token: res.data.accessToken
							});
							self.$store.commit("SETUID", res.data.userId);
							self.getUserInfo();
						} else {
							uni.hideLoading();
							self.isPhoneBox = true;
						}
					}).catch(res => {
						uni.hideLoading();
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000
						});
					});

			},
			/**
			 * 微信小程序一键登录
			 */
			async getPhoneNumber(e) {
				// 情况一：拒绝授权手机号码
				const phoneCode = e.detail.code
				if (!e.detail.code) {
					uni.showModal({
						title: '授权失败',
						content: '您已拒绝获取绑定手机号登录授权，可以使用其他手机号验证登录',
						confirmText: '知道了',
						confirmColor: '#3C9CFFFF'
					})
					return;
				}
				console.log("phoneCode:" + phoneCode);
				// 情况二：允许授权手机号码
				const loginCode = await Routine.getCode()
				console.log("loginCode:" + loginCode);
				this.loading = true;
				AuthApi.weixinMiniAppLogin(phoneCode, loginCode, 'default').then(res => {
					console.table(res);
					const data = res.data;
					// TODO 芋艿：refreshToken 机制
					this.$store.commit("LOGIN", {
						'token': data.accessToken
					});
					// 设置刷新令牌
					this.$store.commit('REFRESH_LOGIN', {
						refreshToken: data.refreshToken
					});
					// 保存opendId用于支付
					this.$store.commit("OPENID", data.openid);
					// 设置当前userId
					this.$store.commit("SETUID", data.userId);

					this.$store.commit("UPDATE_USERMENU", data.appMenu);

					this.getUserInfo();
				}).catch(e => {
					this.loading = false;
					this.$util.Tips({
						title: e
					});
				});
			},
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		position: relative;
		// margin-top: -280px;
		margin-top: - $dawn-top-bg-height;
		// padding: 20rpx 30rpx 40rpx 30rpx;
		padding: $dawn-page-container-padding;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
	}

	.login-box {
		z-index: 10000;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 50vh;
		background-color: #FFFFFF;
		box-shadow: $dawn-box-shadow;
		border-radius: $dawn-border-radius;

		&--image {
			border-radius: 8rpx;
			// width: 100%;
			height: 120rpx;
			margin-bottom: 3vh;
		}

		&--title {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 12vh;
			// margin-bottom: 12vh;
			color: $dawn-theme-color;
			font-size: $dawn-font-size-xl;
			font-weight: bolder;
		}

		&--desc {
			color: $dawn-color-grey;
			font-size: $dawn-font-size-md;
			font-weight: bolder;
			margin-top: 30rpx;
		}

		&--check {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}

		&--btn {
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}

	::v-deep .tn-checkbox__label {
		margin-left: 0px !important;
		margin-right: 10rpx !important;
	}

	.head-container {
		position: relative;
		z-index: 1;
		margin-top: - $dawn-top-bg-height;
	}

	.head-box {
		// height: $dawn-mine-head-height;
		display: flex;
		justify-content: space-between;
		padding-left: 40rpx;
		// margin-top: 40rpx;
		// margin-bottom: 20rpx;
		// background-color: #cbcdcc   !important;
		color: #000 !important;
		// background: linear-gradient(0deg, $dawn-theme-color-light, $dawn-theme-color);

		// &::after {
		// 	content: " ";
		// 	position: absolute;
		// 	z-index: -1;
		// 	width: 100%;
		// 	height: 100%;
		// 	left: 0;
		// 	bottom: 0;
		// 	border-radius: inherit;
		// 	opacity: 1;
		// 	transform: scale(1, 1);
		// 	background-size: 100% 100%;
		// 	background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/3.png);
		// }

	}

	.head-box-left {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	.head-box-right {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		// height: $dawn-mine-head-height;
		// padding-top: 10rpx;
		background-size: cover;
	}

	.btn-wx {
		background: #4caf50;
		border-radius: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 14px;
		color: white;
	}

	/* 用户信息 start */
	.user-info {
		&__container {
			position: absolute;
			top: 30vh;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

		&__avatar {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
			background-image: linear-gradient(to top, #3571BB 10%, #ffffff 90%);
		}

		&__nick-name {
			color: #FFFFFF;
			margin-top: 26rpx;
			font-size: 46rpx;
			font-weight: 600;
			text-align: center;
		}
	}

	/* 用户信息 end */



	/* 用户信息 start */
	.qrcode-info {
		&__container {
			position: absolute;
			top: 45vh;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
		}

		&__avatar {
			width: 200rpx;
			height: 200rpx;
			border: 8rpx solid rgba(255, 255, 255, 0.05);
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		}

		&__nick-name {
			color: #FFFFFF;
			margin-top: 26rpx;
			font-size: 46rpx;
			font-weight: 600;
			text-align: center;
		}
	}

	/* 用户信息 end */

	/* 流星*/
	.tn-satr {
		position: fixed;
		width: 100%;
		// height: 600px;
		height: 90vh;
		overflow: hidden;
		flex-shrink: 0;
		z-index: 998;
	}

	.stars {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 400px;
	}

	.star {
		border-radius: 50%;
		// background: #ffffff;
		background: $dawn-theme-color;
		box-shadow: 0px 0px 6px 0px rgba(255, 255, 255, 0.8);
	}

	.small-stars .star {
		position: absolute;
		width: 3px;
		height: 3px;
	}

	.small-stars .star:nth-child(2n) {
		opacity: 0;
		-webkit-animation: star-blink 1.2s linear infinite alternate;
		animation: star-blink 1.2s linear infinite alternate;
	}

	.small-stars .star:nth-child(1) {
		left: 40px;
		bottom: 50px;
	}

	.small-stars .star:nth-child(2) {
		left: 200px;
		bottom: 40px;
	}

	.small-stars .star:nth-child(3) {
		left: 60px;
		bottom: 120px;
	}

	.small-stars .star:nth-child(4) {
		left: 140px;
		bottom: 250px;
	}

	.small-stars .star:nth-child(5) {
		left: 400px;
		bottom: 300px;
	}

	.small-stars .star:nth-child(6) {
		left: 170px;
		bottom: 80px;
	}

	.small-stars .star:nth-child(7) {
		left: 200px;
		bottom: 360px;
		-webkit-animation-delay: .2s;
		animation-delay: .2s;
	}

	.small-stars .star:nth-child(8) {
		left: 250px;
		bottom: 320px;
	}

	.small-stars .star:nth-child(9) {
		left: 300px;
		bottom: 340px;
	}

	.small-stars .star:nth-child(10) {
		left: 130px;
		bottom: 320px;
		-webkit-animation-delay: .5s;
		animation-delay: .5s;
	}

	.small-stars .star:nth-child(11) {
		left: 230px;
		bottom: 330px;
		-webkit-animation-delay: 7s;
		animation-delay: 7s;
	}

	.small-stars .star:nth-child(12) {
		left: 300px;
		bottom: 360px;
		-webkit-animation-delay: .3s;
		animation-delay: .3s;
	}

	@-webkit-keyframes star-blink {
		50% {
			width: 3px;
			height: 3px;
			opacity: 1;
		}
	}

	@keyframes star-blink {
		50% {
			width: 3px;
			height: 3px;
			opacity: 1;
		}
	}

	.medium-stars .star {
		position: absolute;
		width: 3px;
		height: 3px;
		opacity: 0;
		-webkit-animation: star-blink 1.2s ease-in infinite alternate;
		animation: star-blink 1.2s ease-in infinite alternate;
	}

	.medium-stars .star:nth-child(1) {
		left: 300px;
		bottom: 50px;
	}

	.medium-stars .star:nth-child(2) {
		left: 400px;
		bottom: 40px;
		-webkit-animation-delay: .4s;
		animation-delay: .4s;
	}

	.medium-stars .star:nth-child(3) {
		left: 330px;
		bottom: 300px;
		-webkit-animation-delay: .2s;
		animation-delay: .2s;
	}

	.medium-stars .star:nth-child(4) {
		left: 460px;
		bottom: 300px;
		-webkit-animation-delay: .9s;
		animation-delay: .9s;
	}

	.medium-stars .star:nth-child(5) {
		left: 300px;
		bottom: 150px;
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s;
	}

	.medium-stars .star:nth-child(6) {
		left: 440px;
		bottom: 120px;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}

	.medium-stars .star:nth-child(7) {
		left: 200px;
		bottom: 140px;
		-webkit-animation-delay: .8s;
		animation-delay: .8s;
	}

	.medium-stars .star:nth-child(8) {
		left: 30px;
		bottom: 480px;
		-webkit-animation-delay: .3s;
		animation-delay: .3s;
	}

	.medium-stars .star:nth-child(9) {
		left: 460px;
		bottom: 400px;
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s;
	}

	.medium-stars .star:nth-child(10) {
		left: 150px;
		bottom: 10px;
		-webkit-animation-delay: 1s;
		animation-delay: 1s;
	}

	.medium-stars .star:nth-child(11) {
		left: 420px;
		bottom: 450px;
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s;
	}

	.medium-stars .star:nth-child(12) {
		left: 340px;
		bottom: 180px;
		-webkit-animation-delay: 1.1s;
		animation-delay: 1.1s;
	}

	@keyframes star-blink {
		50% {
			width: 4px;
			height: 4px;
			opacity: 1;
		}
	}

	.star-fall {
		position: relative;
		border-radius: 2px;
		width: 80px;
		height: 2px;
		overflow: hidden;
		-webkit-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}

	.star-fall:after {
		content: "";
		position: absolute;
		width: 50px;
		height: 2px;
		background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(255, 255, 255, 0.4)));
		background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
		left: 100%;
		-webkit-animation: star-fall 3.6s linear infinite;
		animation: star-fall 3.6s linear infinite;
	}

	.star-fall:nth-child(1) {
		left: 80px;
		bottom: -100px;
	}

	.star-fall:nth-child(1):after {
		-webkit-animation-delay: 2.4s;
		animation-delay: 2.4s;
	}

	.star-fall:nth-child(2) {
		left: 200px;
		bottom: -200px;
	}

	.star-fall:nth-child(2):after {
		-webkit-animation-delay: 2s;
		animation-delay: 2s;
	}

	.star-fall:nth-child(3) {
		left: 430px;
		bottom: -50px;
	}

	.star-fall:nth-child(3):after {
		-webkit-animation-delay: 3.6s;
		animation-delay: 3.6s;
	}

	.star-fall:nth-child(4) {
		left: 400px;
		bottom: 100px;
	}

	.star-fall:nth-child(4):after {
		-webkit-animation-delay: .2s;
		animation-delay: .2s;
	}

	@-webkit-keyframes star-fall {
		20% {
			left: -100%;
		}

		100% {
			left: -100%;
		}
	}

	@keyframes star-fall {
		20% {
			left: -100%;
		}

		100% {
			left: -100%;
		}
	}


	/* 波浪*/
	.container {
		// background-image: linear-gradient(to top, #afcef5 10%, #3571BB 90%);
		// background-image: url('~@/static/images/loginbg.png');
		background-size: 100% 100%;
		width: 100vw;
		height: 100vh;
		margin-top: - $dawn-top-bg-height;
	}

	@keyframes move_wave {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1)
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(1)
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1)
		}
	}

	.tnwave {
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
	}

	.waveWrapperInner {
		position: absolute;
		width: 100%;
		overflow: hidden;
		height: 100%;
	}

	.wave {
		position: absolute;
		left: 0;
		width: 200%;
		height: 100%;
		background-repeat: repeat no-repeat;
		background-position: 0 bottom;
		transform-origin: center bottom;
	}

	.bgTop {
		opacity: 0.4;
	}

	.waveTop {
		background-size: 50% 45px;
	}

	.waveAnimation .waveTop {
		animation: move_wave 4s linear infinite;
	}

	.bgMiddle {
		opacity: 0.6;
	}

	.waveMiddle {
		background-size: 50% 40px;
	}

	.waveAnimation .waveMiddle {
		animation: move_wave 3.5s linear infinite;
	}

	.bgBottom {
		opacity: 0.95;
	}

	.waveBottom {
		background-size: 50% 35px;
	}

	.waveAnimation .waveBottom {
		animation: move_wave 2s linear infinite;
	}
</style>